$(function () {
  const layer = layui.layer
  async function getBaseInfo() {
    const { data: res } = await axios({
      method: 'GET',
      url: '/index/baseInfo'
    })
    if (res.errno !== 0) {
      layer.msg('获取基本信息失败！')
    }
    renderBaseInfo(res.data)
    pieInit(res.data.user)
    columnInit(res.data.all_cate)
  }
  function renderBaseInfo(data) {
    $('.admin').html(data.admin_num)
    $('.users').html(data.user.total)
    $('.articles').html(data.article_num)
    $('.advpos').html(data.advpos_num)
    $('.advimg').html(data.advimg_num)
    const userStr = data.new_user
      .map(item => {
        return `<div class="card-item">
      <p>${item.username}</p>
      <p>${item.sex === 1 ? '女' : '男'}</p>
      </div>`
      })
      .join('')
    $('.new_user').html(userStr)
    const artStr = data.hot_article
      .map(item => {
        return `<div class="card-item">
      <p>${item.title}</p>
      </div>`
      })
      .join('')
    $('.hot_art').html(artStr)
  }
  getBaseInfo()
  // 饼图设置函数
  function pieInit(user) {
    const pieChart = echarts.init($('#pie_show .layui-card-body')[0])
    const pieOption = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '用户来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: user.user_woman, name: '女' },
            { value: user.user_man, name: '男' }
          ]
        }
      ]
    }
    pieChart.setOption(pieOption)
  }
  // 柱状图设置函数
  function columnInit(cate) {
    const cate_name = cate.map(item => {
      return item.catename
    })
    const cate_num = cate.map(item => {
      return item.num
    })
    const columnChat = echarts.init($('#column_show')[0])
    const colOption = {
      title: {
        show: true,
        text: '各分类文章发布数量',
        textStyle: {
          color: '#5470c6'
        },
        left: '45%',
        top: '20px'
      },
      xAxis: {
        type: 'category',
        data: cate_name
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: cate_num,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    columnChat.setOption(colOption)
  }
})
